<template>
  <el-tooltip ref="compRef" v-model="value" v-bind="{ ...$props }">
    <template v-for="(_slot, slotName) in $slots" #[slotName]="slotProps">
      <slot :name="slotName" :key="slotName" v-bind="slotProps"></slot>
    </template>
  </el-tooltip>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ElTooltipProps } from "element-plus";
import { BaseTooltipExpose } from "./types";
interface Props extends Partial<ElTooltipProps> {}
withDefaults(defineProps<Props>(), {
  effect: "dark",
  placement: "top",
  offset: 12,
  arrowOffset: 4,
  showAfter: 0,
  showArrow: true,
  hideAfter: 200,
  autoClose: 0,
  enterable: true,
  teleported: true,
  trigger: "hover",
  triggerKeys: () => ["Enter", "Space"],
});

const value = defineModel({ type: String });
const compRef = ref();

defineExpose<BaseTooltipExpose>({
  // @ts-ignore
  instance: compRef,
});
</script>
<style lang="scss"></style>
